<template>
	<view>
		<view class="pay-top">
			<u-navbar  title="支付" :background="background" title-color="#fff" back-icon-color="#fff" :border-bottom="false"></u-navbar>
			<view class="top-money">
				<view class="flex white bold col-baseline m-b-36" >
					<view class="xs">￥</view>
					<view class="" style="font-size: 50upx;">{{need_pay}}</view>
				</view>
				<view class="xs white bold text-center">应支付</view>
			</view>
		</view>
		<view class="p-l-30 p-r-30" style="transform: translate(0,-18%);">
	<!-- 		<view class="bg-white p-24 flex br20 pay-price m-b-24">
				<view class="price-item flex-col br20 row-center flex">
					<view class="nr primary bold m-b-24">
						{{price}}元
					</view>
					<view class="xxs lighter">
						总金额
					</view>
				</view>
				<view class="price-item flex-col br20 row-center flex" @click="nav">
					<view class="nr primary bold m-b-24">
						-{{dis_coupon}}元
					</view>
					<view class="xxs lighter flex">
						<view class="">
							优惠券
						</view>
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view> -->
			<view class="bg-white pay-select br20">
				<view 
					class="flex  row-between m-b-22" 
					 v-for="(item,index) in paySelect" 
					 :key="item.id"
					 :class="select==index?'select-active':'select-item'"
					 @click="select=index"
					 >
					<view class="flex">
						<view class="m-r-18">
							<image :src="item.icon" mode="heightFix"></image>
						</view>
						<view class="bold">
							{{item.name}}
						</view>
					</view>
					<view class="bold primary" > 
						{{item.is_end}}
					</view>
				</view>
			</view>
			<view class="pay-btn bold white br20 m-t-60 text-center p-t-30 p-b-30" @click="prepayFun">
				支付
			</view>
		</view>
		
	</view>
</template>

<script>
	import {sendTask,payPrice} from '@/api/user'
	import {prepay} from '@/api/app'
	import {
		getMyCoupon
	} from '@/api/activity';
	import{
		wxpay
	} from '@/utils/pay.js'
	
	export default {
		data() {
			return {
				paySelect:[
					{
						id:3,
						name:'余额支付',
						icon:'../../static/other.png',
						is_end:'充值更省钱'
					},
					{
						id:1,
						name:'微信支付',
						icon:'../../static/weixin.png',
						is_end:''
					},
					{
						id:4,
						name:'线下支付',
						icon:'../../static/other.png',
						is_end:''
					},
				],
				select:0,
				price:0,
				need_pay:0,
				dis_coupon:0,
				fometext:"transport",
				
				car_category_id:'',
				car_id:'',
				user_name:'',
				mobile:'',
				type:'',
				is_carry:'',
				is_elevator:'',
				floor_num:'',
				is_passenger:'',
				passenger_num:'',
				is_back:'',
				weight:'',
				is_subscribe:'',
				transport_address:'',
				user_remarks:'',
				label_ids:[],
				subscribe_time:'',
				
				
				order_id:'',
				coupon_list_id:''
			}
		},
		onLoad(option) {
			if(!!option.price){
				this.price = option.price
				this.need_pay =  option.price
			}
			if(option.type==12){
			
				this.fometext='remover'
				this.need_pay=uni.getStorageSync("reprice")
				console.log(this.need_pay);
				this.order_id = option.order_id;
			}else{
				this.order_id = option.order_id;
				this.payPriceFun();
			}
			
			
			let pages = getCurrentPages(); // 当前页面
			let beforePage = pages[pages.length - 2]; // 上一页
			console.log(beforePage)
			this.price =  beforePage.$vm.total
			// this.need_pay =  beforePage.$vm.total;
			
			this.car_category_id = beforePage.$vm.carInfo.car_category_id;
			this.car_id = beforePage.$vm.carInfo.car_mes.id;
			this.user_name = beforePage.$vm.user_name;
			this.mobile = beforePage.$vm.mobile
			this.subscribe_time = beforePage.$vm.subscribe_time
			this.type = beforePage.$vm.type
			this.is_carry = beforePage.$vm.is_carry
			
			this.is_elevator = beforePage.$vm.is_elevator
			this.floor_num = beforePage.$vm.floor_num
			this.is_passenger = beforePage.$vm.is_passenger
			this.passenger_num = beforePage.$vm.passenger_num
			this.is_back = beforePage.$vm.is_back
			this.weight = beforePage.$vm.weight
			this.is_subscribe = beforePage.$vm.is_subscribe
			this.transport_address = beforePage.$vm.tranInfo
			
			this.user_remarks = beforePage.$vm.user_remarks
			this.label_ids =  beforePage.$vm.carInfo.label;
				
			uni.$on('useCoupon',(id)=>{
				console.log('使用了优惠券',id);
				this.coupon_list_id = id;
				// this.coupon_list_id.push(id)
				this.payPriceFun()
			})
			
		},
		methods: {
			getCoupomList(){
				
			},
			
			payPriceFun(){
				payPrice({
					id:this.order_id,
					coupon_list_id:this.coupon_list_id
				}).then(({code,data})=>{
					console.log(data)
					if(code==1){
						this.dis_coupon = data.discount_amount;
						this.need_pay =  data.order_amount
						this.price = data.total_amount;
					}
					
				})
			},
			nav(){
				
				// this.$toast({
				// 	title:'暂无可用优惠券'
				// })
				// return 
				uni.navigateTo({
					url:'/bundle/pages/pay_coupon/pay_coupon'
				})
			},
			prepayFun(){
				prepay({
					order_id:this.order_id,
					pay_way:this.paySelect[this.select].id,
					coupon_id:this.coupon_list_id,
					from:this.fometext
				}).then(res=>{
					console.log(res)
					if(res.code==10001){
						uni.redirectTo({
							url:`/pages/pay_result/pay_result?from=${this.fometext}&id=` + this.order_id
						})
						return 
					}
					wxpay(res.data).then(res=>{
						console.log(res)
						if(res == 'success') {
							uni.redirectTo({
								url:`/pages/pay_result/pay_result?from=${this.fometext}&id=` +this.order_id
							})
						}
						else {
							uni.switchTab({
								url:'/pages/transport_order/transport_order'
							})
						}
						
					}).catch(err=>{
						this.$toast({
							title:'支付失败'
						})
						
					})
					
					
				})
			},
			sendTaskFun(){
				var _this = this;
				let {car_category_id,car_id,user_name,mobile,
				type,is_carry,is_elevator,floor_num,is_passenger,passenger_num,is_back,weight,
				is_subscribe,transport_address,user_remarks,label_ids,subscribe_time 
				
				} = this;
				let latitude =  transport_address[0].start_latitude;
				let longitude = transport_address[0].start_longitude;
				
				let pay_way =  this.paySelect[this.select].id;
				
				
				
				sendTask({
					car_category_id,car_id,
					user_name,mobile,
					type,is_carry,is_elevator,floor_num,is_passenger,passenger_num,is_back,weight,
					is_subscribe,transport_address:JSON.stringify(transport_address),user_remarks,
					latitude,longitude,label_ids,subscribe_time,
					pay_way
				}).then(res=>{
					console.log(res);
					if(res.code==1){
						if(pay_way==4){
							uni.switchTab({
								url:'/pages/transport_order/transport_order'
							})
							return 
						}
						
						
						_this.prepayFun(res.data.id)
					}
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.pay-top{
		position: relative;
		background-image: url();
		background-size: 100% 503rpx;
		background-repeat: no-repeat;
		height: 503rpx;
		
		.top-money{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
	}
	.pay-price{
		// transform: translate(0,-50%);
		box-shadow: 0upx 10upx 10upx 0upx #ededed;
		.price-item{
			background-color: #f3f4f5;
			padding: 57rpx 0;
			flex: 1;
			&:first-child{
				margin-right: 20rpx;
			}
		}
	}
	.pay-select{
		padding: 30rpx 24rpx;
		box-shadow: 0upx 10upx 10upx 0upx #ededed;
		image{
			height: 44rpx;
		}
		.select-item{
			padding: 24rpx 28rpx;
			background-color: #f3f4f5;
			border-radius: 20rpx;
			
		}
		.select-active{
			padding: 24rpx 28rpx;
			// border-radius: 20rpx;
			background-image:url();
			background-repeat: no-repeat;
			background-size: 100% auto;
		}
	}
	.pay-btn{
		box-shadow: 0upx 10upx 10upx 0upx #f7d4cd;
		background: linear-gradient(#e36e51  , #df563b);
	}
</style>
